<template>
  <view class="tools" :class="!isShow ? 'current' : ''">
    <view class="item likes">
      <image
        @click="handle('like')"
        :src="!item.Like ? '/static/aixin.png' : '/static/aixinRed.png'"
        mode="widthFix"
      ></image>
      <text>{{ item.LikeNum }}</text>
    </view>

    <view v-if="isShow" class="item collect">
      <image
        @click="handle()"
        :src="
          !item.Collect
            ? '/static/icon_collect.png'
            : '/static/icon_collect_red.png'
        "
        mode="widthFix"
      ></image>
      <text>{{ item.CollectNum }}</text>
    </view>
    <view class="item list" @tap="goPage(item)">
      <image src="/static/icon_list.png" mode="widthFix"></image>
      <text>List</text>
    </view>

    <view class="item shares" @tap="share(item)">
      <image src="/static/share-fill.png" mode="widthFix"></image>
      <text>Share</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      like: true,
      isShow: true,
    };
  },
  created() {
    const params = this.$route.query;
    console.log("params: ", params);
    if (params?.Episode) {
      this.isShow = false;
    } else {
      this.isShow = true;
    }
  },
  mounted() {
    const params = this.$route.query;
  },
  methods: {
    handle(type) {
      // this.like = this.like ? false : true;
      uni.navigateTo({
        url: "/pages/downLoad/downLoad",
      });
    },
    goPage(item) {
      const params = this.$route.query;
      if (params?.Episode) {
        uni.navigateTo({
          url: `/pages/videoList/videoList?id=${params.id}&title=${item.Title}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/videoList/videoList?id=${item.VideoId}&title=${item.Title}`,
        });
      }
    },
    share(item) {
      const params = this.$route.query;
      //判断是生成环境还是开发环境
      let env = "";
      let url = "";
      if (process.env.NODE_ENV === "development") {
        env = "http://localhost:8080/#";
      } else if (process.env.NODE_ENV === "production") {
        env = "https://www.flowshort.tv/#";
      }
      if (params?.Episode) {
        url = `${env}/pages/showVideo/showVideo?id=${params.id}&Episode=${params.Episode}`;
      } else {
        url = `${env}/pages/videoList/videoList?id=${item.VideoId}&title=${item.Title}`;
      }
      let domInput = document.createElement("input");
      domInput.value = url;
      document.body.appendChild(domInput); // 添加input节点
      domInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      uni.showToast({
        title: "Link copied to your clipboard",
        icon: "none",
      });
      domInput.remove();
    },
  },
};
</script>

<style scoped lang="scss">
.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-size: 24rpx;
  right: 10px;

  uni-image {
    width: 80rpx;
    height: 80rpx;
  }

  .text {
    margin-top: 10rpx;
  }
}

.likes {
  position: fixed;
  z-index: 99;
  bottom: 620upx;
}

.collect {
  position: fixed;
  z-index: 99;
  bottom: 480upx;
}

.list {
  position: fixed;
  z-index: 99;
  bottom: 340upx;
}

.shares {
  position: fixed;
  z-index: 99;
  bottom: 200upx;
}

.current {
  .list {
    bottom: 480upx;
  }

  .shares {
    bottom: 340upx;
  }
}
</style>
